<template>
  <div class="waper_page" style="padding: 20px;">
    <div class="asideTopList">
      <TopNav :navList="navList" :itemNav="itemNav" @handleNav="handleNav"></TopNav>
      <div class="group">
        <div class="asideLeft">
          <AsideBox :asideList="asideList" :itemAside="itemAside" @handleAside="handleAside"></AsideBox>
        </div>
        <div class="listRight">
          <ListBox :dataList="dataList" :className="className" :itemList="itemList" @handleGoto="handleGoto"></ListBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from '@/components/Widgets/topNav'
import AsideBox from '@/components/Widgets/asideBox'
import ListBox from '@/components/Widgets/listBox'
export default {
  components: {TopNav,AsideBox,ListBox},
  props: {},
  data () {
    return {
      // 顶部数据
      navList:[],
      itemNav:{},
      // 侧边栏数据
      asideList:[],
      itemAside:{},
      // 列表数据
      dataList:[],
      itemList:{},
      className:'listImg6',// 6列：listImg6 5列：listImg5 4列：listImg4
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getNavList();
    this.getAsideList();
    
  },
  updated () {},
  methods: {
    // 获取导航栏数据
    getNavList(){
      this.navList = [
        {title:'最近观看',code:'1211',},
        {title:'收藏',code:'1212',},
        {title:'搜索',code:'1213',},
        {title:'排行榜',code:'1214',},
        {title:'电影',code:'1215',},
        {title:'电视剧',code:'1216',},
      ];
      this.itemNav = this.navList.length>0 ? this.navList[0] : {};
    },
    // 获取侧边栏数据
    getAsideList(){
      let data = [
        { ptitle:'最近观看',pcode:'1211',
          listData:[
            {title:'热播电影',code:'1110'},
            {title:'热播电视剧',code:'1111'},
            {title:'热播电视剧',code:'1111'},
            {title:'热播电视剧',code:'1111'},
            {title:'热播电视剧',code:'1111'},
            {title:'热搜电影',code:'1112'},
            {title:'热搜电视剧',code:'1113'},
            {title:'网评高分榜',code:'1114'},
            {title:'年度电影',code:'1115'},
            {title:'年度电影',code:'1115'},
            {title:'年度电影',code:'1115'},
            {title:'年度电影',code:'1115'},
            {title:'年度电影',code:'1115'},
            {title:'年度电影',code:'1115'},
            {title:'年度电影',code:'1115'},
          ]
        },
        { ptitle:'收藏',pcode:'1212',
          listData:[]
        },
        { ptitle:'搜索',pcode:'1213',
          listData:[]
        },
        { ptitle:'排行榜',pcode:'1214',
          listData:[
            {title:'热播电影',code:'1110'},
            {title:'热播电视剧',code:'1111'},
            {title:'热搜电影',code:'1112'},
            {title:'热搜电视剧',code:'1113'},
            {title:'网评高分榜',code:'1114'},
            {title:'年度电影',code:'1115'},
          ]
        },
        { ptitle:'电影',pcode:'1215',
          listData:[
            {title:'喜剧',code:'1210'},
            {title:'科幻',code:'1211'},
            {title:'动作',code:'1212'},
            {title:'爱情',code:'1213'},
            {title:'动画',code:'1214'},
          ]
        },
        { ptitle:'电视剧',pcode:'1216',
          listData:[
            {title:'军旅抗战',code:'1310'},
            {title:'古装历史',code:'1311'},
            {title:'都市是生活',code:'1312'},
            {title:'偶像爱情',code:'1313'},
            {title:'青春校园',code:'1314'},
          ]
        },
      ]
      data.forEach(item =>{
        if(this.itemNav.code == item.pcode){
          this.asideList = item.listData;
        }
      })
      this.itemAside = this.asideList.length>0 ? this.asideList[0] : {};
      this.getListData();
    },
    // 获取列表数据
    getListData(){
      let listData = [
        { ptitle:'最近观看',pcode:'1211',
          asideTitle:'热播电影',asideCode:'1110',
          data:[
            {title:'哥，你好',code:'111011',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'平凡英雄',code:'111012',imgUrl:require('@/assets/img/r-2.jpg')},
            {title:'独行月球',code:'111013',imgUrl:require('@/assets/img/r-3.jpg')},
            {title:'阴阳画皮年少好滴哦好等哈搜狐都爱',code:'111014',imgUrl:require('@/assets/img/r-4.jpg')},
            {title:'一周的朋友',code:'111015',imgUrl:require('@/assets/img/r-5.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-6.jpg')},
          ]
        },
        { ptitle:'最近观看',pcode:'1211',
          asideTitle:'热播电视剧',asideCode:'1111',
          data:[
            {title:'爱的二八定律',code:'111111',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'我们的当打之年',code:'111112',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'你是我的荣耀',code:'111113',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'谢谢你医生',code:'111114',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'良辰美景好时光',code:'111115',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'陈情令',code:'111116',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { ptitle:'搜索',pcode:'1213',
          asideTitle:'',asideCode:'',
          data:[]
        },
        { ptitle:'排行榜',pcode:'1214',
          asideTitle:'热播电影',asideCode:'1110',
          data:[
            {title:'哥，你好',code:'111011',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'平凡英雄',code:'111012',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'独行月球',code:'111013',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'阴阳画皮',code:'111014',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'一周的朋友',code:'111015',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'侏罗纪世界3',code:'111016',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { ptitle:'电影',pcode:'1215',
          asideTitle:'喜剧',asideCode:'1210',
          data:[
            {title:'喜剧',code:'1210',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'科幻',code:'1211',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'动作',code:'1212',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'爱情',code:'1213',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'动画',code:'1214',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
        { ptitle:'电视剧',pcode:'1216',
          asideTitle:'都市是生活',asideCode:'1312',
          data:[
            {title:'军旅抗战',code:'1310',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'古装历史',code:'1311',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'都市是生活',code:'1312',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'偶像爱情',code:'1313',imgUrl:require('@/assets/img/r-1.jpg')},
            {title:'青春校园',code:'1314',imgUrl:require('@/assets/img/r-1.jpg')},
          ]
        },
      ]
      

      let filter = (condition,data) =>{
        return data.filter(item =>{
          return Object.keys(condition).every(key =>{
            return String(item[key]).toLowerCase().includes( String(condition[key]).trim().toLowerCase() );
          })
        })
      }

      if(JSON.stringify(this.itemAside) != '{}'){
        let data = filter({pcode:this.itemNav.code, asideCode:this.itemAside.code}, listData);
        this.dataList = data.length>0 ? data[0].data : [];
      } else {
        this.dataList = [];
      }

      this.itemList = this.dataList.length>0 ? this.dataList[0] : {};
    },
    // 切换顶部分类
    handleNav(item){
      this.itemNav = item;
      this.getAsideList();
    },
    // 切换侧边栏分类
    handleAside(item){
      this.itemAside = item;
      this.getListData();
    },
    // 跳转
    handleGoto(data){
      console.log(data);
      this.itemList = data;
    }

  },
  filters: {},
}
</script>

<style lang="less" scoped>
.asideTopList {
  width: 1280px;
  height: 720px;
  background: url('../../assets/images/bg1.png');
  padding: 20px;
  .group{
    display: flex;
    flex-direction: row;
    height: calc(100% - 25px);
    .asideLeft{
      width: 260px;
      height: 100%;
    }
    .listRight{
      width: calc(100% - 260px);
      height: 100%;
    }
  }
}
</style>